<template>
  <c-row-add v-show="visible" :title="multLang('btn_new_a', 'title_ba_m')">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="140px"
      :validate-on-rule-change="false"
    >
      <c-row :col="6">
        <c-col>
          <el-form-item
            :label="multLang('title_ba_m', 'title_name_ab_b', ':')"
            prop="group_name"
          >
            <el-input
              v-model="form.group_name"
              :placeholder="multLang('text_d')"
            ></el-input>
          </el-form-item>
        </c-col>
        <c-col>
          <el-form-item :label="multLang('text_au', ':')" prop="parent_id">
            <c-cascader
              v-model="form.parent_id"
              show-all-levels
              :options="list.group"
              clearable
              :placeholder="tplLang('title_aaad_h')"
              @change="addGoroupChange"
            ></c-cascader>
          </el-form-item>
        </c-col>

        <c-col :col="11">
          <el-form-item
            :label="multLang('title_ba_m', 'title_aah_h', ':')"
            prop="remark"
          >
            <c-input-text v-model="form.remark"></c-input-text>
          </el-form-item>
        </c-col>
        <c-col>
          <el-form-item
            :label="multLang('text_bc', '/', 'text_av', ':')"
            prop="is_out"
          >
            <el-radio-group
              v-model="form.is_out"
              @change="isOutChange"
              :disabled="!!form.parent_id"
            >
              <el-radio :label="false">
                {{ multLang('text_av') }}
              </el-radio>
              <el-radio :label="true">{{ multLang('text_aw') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </c-col>
        <c-col v-show="form.is_out">
          <el-form-item
            :label="multLang('title_dn', 'title_b_o', ':')"
            prop="org_id"
          >
            <c-cascader
              :disabled="!!form.parent_id"
              show-all-levels
              v-model="form.org_id"
              :options="customerFacilitiesList"
              clearable
              :placeholder="tplLang('text_choose_a', ['title_b_o'])"
            >
            </c-cascader>
          </el-form-item>
        </c-col>
      </c-row>
    </el-form>
  </c-row-add>
</template>
<script>
import { getGroupOption } from '@/http/api/v1/org'
export default {
  name: 'CGroupAdd',
  components: {},
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return {
      list: {
        group: [],
        groupMap: {}
      },
      form: {
        group_name: '',
        parent_id: '',
        remark: '',
        is_out: false,
        org_id: ''
      }
    }
  },
  computed: {
    customerFacilitiesList() {
      return this.optionList('customerFacilities')
    },
    rules() {
      const rule = {
        group_name: {
          required: true,
          message: this.multLang('msg_g'),
          trigger: 'blur'
        }
      }
      this.form.is_out &&
        (rule.org_id = {
          required: true,
          message: this.tplLang('text_choose_a'),
          trigger: 'change'
        })
      return rule
    }
  },

  watch: {
    visible(val) {
      val &&
        getGroupOption().then(({ data }) => {
          this.list.group = data
        })
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'customerFacilities' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    addGoroupChange(_, data) {
      const { out, org_id } = data || {}
      this.form.is_out = out || false
      this.form.org_id = org_id || ''
    },
    isOutChange(val) {
      val || (this.form.org_id = '')
    }
  }
}
</script>
<style lang="scss"></style>
